I'm using @react-navigation/bottom-tabs Package but I don't understand how to add header left on Tab.Screen tag?
And also can I add image on header left?
Here is my code:
import React from "react";
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from "./TabScreen/Home";
import Category from "./TabScreen/Category";
import Search from "./TabScreen/Search";
import Profile from "./TabScreen/Profile";
import Colors from "../../../Style_Sheet/Colors";
const Tab = createBottomTabNavigator();
const Tabs =()=>{
return(
<Tab.Navigator tabBarPosition="bottom" screenOptions={{
tabBarStyle: {
backgroundColor: Colors.dark,
},
}}>
<Tab.Screen name="Home" component={Home} options={{headerTitle:"Explore",headerTintColor:Colors.white,headerStyle:{backgroundColor:Colors.dark}}}/>
<Tab.Screen name="Category" component={Category} options={{headerTitle:"",headerTintColor:Colors.white,headerStyle:{backgroundColor:Colors.dark},headerLeft:{}}}/>
<Tab.Screen name="Search" component={Search} options={{headerTitle:"Explore",headerTintColor:Colors.white,headerStyle:{backgroundColor:Colors.dark}}}/>
<Tab.Screen name="Profile" component={Profile} options={{headerTitle:"Explore",headerTintColor:Colors.white,headerStyle:{backgroundColor:Colors.dark}}}/>
</Tab.Navigator>
)
}
export default Tabs;
Use this,
Here is the code where you can add the headerLeft on Tabs.Screen tag.
<Tabs.Screen
name="Home"
component={HomeScreen}
options={{
headerTitle: props => <LogoTitle {...props} />,
headerLeft: () => (
<Button
onPress={() => alert('This is a button!')}
title="Info"
color="#fff"
/>
),
}}
/>
and also you can add image or Button under the headerLeft Tag, for more details follow this link